<template>
	<view class="cu-modal bottom-modal" :class="{'show':isShow}" @click="hide">
		<view class="cu-dialog">
			<view class="goods-data">
				<view class="thumb">
					<image :src="goodsInfo.img_list[0]" mode="">
					</image>
				</view>
				<view class="item">
					<view class="title">
						<text></text>
					</view>
					<view class="price">
						<text class="min">￥</text>
						<text class="max">{{goodsInfo.real_price}}</text>
						<text class="min">.00</text>
					</view>
					<view class="inventory">
						<text>库存：{{goodsInfo.stock_num}}</text>
					</view>
				</view>
			</view>
			<view class="attr-size">
				<view class="attr-list" v-for="(item,index) in goodsInfo.attribute" :key="index">
					<view class="title">
						<text>{{item._key}}</text>
					</view>
					<view class="size-list">
						<div class="list">
							<text>{{item._value}}</text>
						</div>
					</view>
				</view>
				<view class="attr-number" @click.stop="onStop">
					<view class="tit">数量</view>
					<view class="number">
						<text class="iconfont icon-jian" @click="decrement"></text>
						<input type="number" v-model="num" maxlength="8" class="quantity-input">
						<text class="iconfont icon-jia" @click="increment"></text>
					</view>
				</view>
			</view>
			<view class="attr-btn">
				<view class="confirm" v-if="BuyType === 1" @click="exchange(BuyType)">立即交换</view>
				<view class="confirm" v-if="BuyType === 2" @click="addcart(BuyType)">加入购物车</view>
				<view class="confirm" v-if="BuyType === 3" @click="onConfirm(BuyType)">立即购买</view>

				<!-- <view class="confirm" v-if="BuyType === 2 || BuyType === 3" @click="onConfirm(BuyType)">确定</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addCart
	} from '@/config/api.js';
	export default {
		props: ['goodsInfo'],
		data() {
			return {
				num: 1,
				isShow: false,
				AttrIndex: 0,
				SizeIndex: 0,
				AttrSizeList: [{
					index: 0,
					attr: '颜色',
					SizeList: [{
						index: 0,
						size: '白色'
					}, {
						index: 1,
						size: '黑色'
					}, {
						index: 2,
						size: '粉丝'
					}, {
						index: 3,
						size: '灰色'
					}, ],
				}, {
					index: 0,
					attr: '尺码',
					SizeList: [{
						index: 0,
						size: 'M尺码'
					}, {
						index: 1,
						size: 'L尺码'
					}, {
						index: 2,
						size: 'XL尺码'
					}, {
						index: 3,
						size: 'XXL尺码'
					}, ],
				}],
				// 购买类型
				BuyType: 0,
			};
		},

		onShow() {
			uni.setStorageSync('oderGoodsList', '')
			uni.setStorageSync('oderGoodsInfo', '')
			// uni.setStorageSync('goodsId', '')
		},
		methods: {
			//购物车数量
			increment() {
				this.num++;
			},
			decrement() {
				if (this.num > 1) this.num--; // 确保数量不小于 1
			},
			onStop() {
				// 处理点击事件的逻辑
			},
			/**
			 * 显示 
			 * @param {Number} type 1 点击选择 2 加入购物 3 立即购买
			 */
			show(type) {
				this.BuyType = type;
				this.isShow = true;
			},
			hide() {
				this.isShow = false;
			},
			onStop() {},
			/**
			 * 属性选择点击
			 */
			onAttrSize(item, value, index, idx) {
				this.AttrSizeList[index].index = idx;
				this.AttrIndex = item.index;
				this.SizeIndex = value.index;
			},
			/**
			 * 确认点击
			 */
			exchange(type) {
				uni.navigateTo({
					url: '/moduleC/exchangeDeatils/exchangeDeatils'
				})
			},
			addcart(type) {
				if ((this.num - 0) > (this.goodsInfo.stock_num - 0)) return uni.$u.toast('超出库存');
				const data = {
					num: this.num,
					...this.goodsInfo
				};
				data['attribute'] = JSON.stringify(data['attribute']);
				addCart(data).then(res => {

				})
				// uni.navigateTo({
				// 	url: '/moduleB/ConfirmOrder/ConfirmOrder'
				// })
			},
			onConfirm(type) {
				if ((this.num - 0) > (this.goodsInfo.stock_num - 0)) return uni.$u.toast('超出库存');
				const data = {
					num: this.num,
					...this.goodsInfo
				};
				uni.setStorageSync('oderGoodsInfo', '')
				uni.setStorage({
					key: 'oderGoodsInfo',
					data: data,
					success: function() {
						uni.navigateTo({
							url: '/moduleB/ConfirmOrder/ConfirmOrder'
						})
					}
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'GoodsAttr.scss';
</style>